<template>
  <div>
    <!-- 表格 -->
    <!-- <el-container> -->
    <div class="add_table_css">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="startingTime" label="起始时间" width="150"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="150"></el-table-column>
        <el-table-column prop="nameOfSocialGroup" label="社会团体名称" width="350"></el-table-column>
        <el-table-column prop="post" label="任何职务 " width="320"></el-table-column>
      </el-table>
    </div>
    <!-- </el-container> -->
    <!-- 分页 -->
    <div class="block page_css">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        @current-change="change"
        @prev-click="prev"
        @next-click="next"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      staffId: 6,
      tableData: []
    };
  },
  methods: {
    /* 页面渲染 */
    getCon(){
      this.$axios({
        url:'/socialOrganizationEmployment/list',
        method:'post',
        data:{
          staffId: this.staffId,
          page: this.page,
          limit: this.limit,
        }
      }).then(res => {
        // console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.count;
      })
    },
    /* 分页渲染 */
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
  },
  mounted(){
    this.getCon();
  }
};
</script>
<style scoped lang="less">
.page_css {
  margin: 10px;
  text-align: right;
  margin-right: 135px;
}
.el-table {
  font-size: 13px;
}
.add_table_css {
  border: 1px solid #eee;
  // height: 790px;
  padding: 20px;
  margin-right: 135px;
}
</style>